<template>
    <div class="dialog-equity-main">
        <Dialog :app-dialog="appDialog">
            <div class="content">
                <!-- <el-scrollbar height="450px"> -->
                <div v-if="appDialog.title == '编辑权益'" class="edit_warning">
                    <img class="edit_warning_icon" src="/static/err_tips.png" alt="" />
                    <div>修改权益后用户端可能会发生变化，请谨慎修改！</div>
                </div>
                <el-form ref="formRef" :model="form" :rules="rules">
                    <el-form-item label="权益名称" prop="priority_inner_name">
                        <el-input
                            v-if="appDialog.title == '添加权益'"
                            v-model="form.priority_inner_name"
                            maxlength="10"
                            placeholder="请输入权益名称，不超过10个字，不可修改" />
                        <div v-else>{{ form.priority_inner_name }}</div>
                    </el-form-item>
                    <el-form-item label="展示名称" prop="priority_outer_name">
                        <el-input
                            v-model="form.priority_outer_name"
                            placeholder="请输入展示名称，不超过10个字"
                            maxlength="10"
                            :disabled="form.default === 1" />
                        <div class="form_desc">用户端展示的权益名称</div>
                    </el-form-item>
                    <el-form-item label="权益图标" prop="priority_icon">
                        <div class="upload_card">
                            <div class="upload_wrap">
                                <el-upload
                                    action=""
                                    accept=".png"
                                    :show-file-list="false"
                                    :auto-upload="false"
                                    :on-change="onUploadChange">
                                    <div class="upload_btn">
                                        <el-image
                                            class="upload_img"
                                            :src="form?.priority_icon || defaultIconUrl"
                                            fit="cover">
                                            <template #error>
                                                <div class="upload_img_error">
                                                    <img
                                                        v-if="
                                                            form.default == 1 && form.priority_inner_name == '多倍积分'
                                                        "
                                                        class="upload_img"
                                                        src="/static/member/points.png" />
                                                    <img
                                                        v-else-if="
                                                            form.default == 1 && form.priority_inner_name == '包邮'
                                                        "
                                                        class="upload_img"
                                                        src="/static/member/default_rights_icon.png" />
                                                    <el-icon v-else><icon-picture /></el-icon>
                                                </div>
                                            </template>
                                        </el-image>
                                    </div>
                                </el-upload>
                                <div class="rest_btn" @click="onDefaultIcon">
                                    <el-icon><RefreshRight /></el-icon> 恢复默认
                                </div>
                            </div>
                            <div class="upload_desc">建议尺寸144*144，限制png格式</div>
                        </div>
                    </el-form-item>
                    <el-form-item label="权益简介" prop="priority_brief">
                        <el-input
                            v-model="form.priority_brief"
                            type="textarea"
                            :rows="4"
                            maxlength="100"
                            placeholder="请输入权益名称，不超过100个字" />
                        <div class="form_desc">权益简介将展示在用户端，请认真填写</div>
                    </el-form-item>
                </el-form>
                <!-- </el-scrollbar> -->
            </div>
        </Dialog>
    </div>
</template>
<script setup lang="ts">
import { ref, reactive } from 'vue';
import { ElMessage } from 'element-plus';
import Dialog from '@/components/Dialog.vue';
import { Picture as IconPicture } from '@element-plus/icons-vue';
import { addMemberPriority, editMemberPriority } from '@/api/member/equityManage/index';
import { uploadFile2 } from '@/api/common';

const emit = defineEmits(['dialogEquitySubmit']);

const props = defineProps({
    id: {
        type: [String, Number],
        default: ''
    }
});

const formRef = ref<any>(null);
const defaultIconUrl = location.origin + '/static/member/default_rights_icon.png';
const defaultFreeShippingIconUrl = location.origin + '/static/member/free_shipping.png';
const defaultPointsIconUrl = location.origin + '/static/member/points.png';
const form = reactive<any>({
    corpId: '',
    id: '',
    priority_inner_name: '',
    priority_outer_name: '',
    priority_icon: defaultIconUrl,
    priority_brief: '',
    default: 2,
    appType: 1
});

const rules = reactive({
    priority_inner_name: [{ required: true, message: '该字段必填', trigger: 'blur' }],
    priority_outer_name: [{ required: true, message: '该字段必填', trigger: 'blur' }],
    priority_icon: [{ required: true, message: '该字段必填', trigger: 'blur' }],
    priority_brief: [{ required: true, message: '该字段必填', trigger: 'blur' }]
});

const cancelHandel = () => {
    appDialog.visible = false;
};

const submitHandel = () => {
    if (!formRef.value) return;
    formRef.value.validate(async (valid: any) => {
        const params = {
            priority_inner_name: form.priority_inner_name,
            priority_outer_name: form.priority_outer_name,
            priority_icon: form.priority_icon,
            priority_brief: form.priority_brief,
            default: form.default
        };
        if (valid) {
            if (appDialog.title == '添加权益') {
                await addMemberPriority(params);
                ElMessage.success('添加成功');
            } else {
                params.id = form.id;
                await editMemberPriority(params);
                ElMessage.success('编辑成功');
            }
            emit('dialogEquitySubmit');
            appDialog.visible = false;
        }
    });
};

const appDialog = reactive<any>({
    visible: false,
    title: '编辑权益',
    width: '35%',
    cancel: cancelHandel,
    submit: submitHandel,
    cancelText: '取消',
    submitText: '确定'
});

// 上传图片
const onUploadChange = async (file: any) => {
    if (!file) {
        return;
    }

    // const suffix = file.name.split('.').at(-1).toLowerCase();
    if (!['image/png'].includes(file.raw.type)) {
        ElMessage.error('请上传png格式的图片');
        return;
    }
    uploadFun(file.raw, file.name);
};

const uploadFun = async (file: any, fileName: string) => {
    const res = await uploadFile2({ file, fileName });
    form.priority_icon = res.url;
};

/**
 * 跟换默认权益图片
 */
const onDefaultIcon = () => {
    if (form.default == 1 && form.priority_inner_name == '多倍积分') {
        form.priority_icon = defaultPointsIconUrl;
    } else if (form.default == 1 && form.priority_inner_name == '包邮') {
        form.priority_icon = defaultFreeShippingIconUrl;
    } else {
        form.priority_icon = defaultIconUrl;
    }
};

defineExpose({
    appDialog,
    form
});
</script>
<style lang="scss" scoped>
.dialog-equity-main {
    .content {
        .edit_warning {
            display: flex;
            align-items: center;
            height: 36px;
            margin-bottom: 16px;
            color: #262626;
            border: 1px solid #ffc69e;
            border-radius: 4px;
            background: #fff6f0;
            font-size: 14px;
            font-weight: 400;
            line-height: 36px;
            .edit_warning_icon {
                width: 16px;
                height: 16px;
                margin: 0 8px;
                transform: rotate(180deg);
            }
        }
        .upload_card {
            display: flex;
            flex-direction: column;
            .upload_wrap {
                display: flex;
                align-items: flex-end;
                .upload_btn {
                    position: relative;
                    display: grid;
                    width: 80px;
                    height: 80px;
                    border: 1px solid #eaeaea;
                    border-radius: 2px;
                    background: #f8f8f8;
                    place-items: center;
                    &::before {
                        position: absolute;
                        z-index: 1;
                        bottom: 0;
                        left: -1px;

                        width: 82px;
                        height: 27px;

                        content: '更换图片';
                        text-align: center;

                        opacity: 0.4;
                        color: #fff;
                        background: #33302d;

                        font-size: 13px;
                        font-weight: 400;
                        line-height: 27px;
                    }
                    .upload_img {
                        width: 64px;
                        height: 64px;
                        .upload_img_error {
                            font-size: 64px;
                        }
                    }
                }
                .rest_btn {
                    display: flex;
                    align-items: center;
                    margin-bottom: 5px;
                    margin-left: 13px;
                    cursor: pointer;
                    color: #ff6b00;
                    font-size: 14px;
                    font-weight: 400;
                    line-height: 14px;
                }
            }
            .upload_desc {
                margin-top: 6px;
                color: #969696;
                font-size: 12px;
                font-weight: 400;
                line-height: 14px;
            }
        }
        .form_desc {
            padding-top: 6px;
            line-height: 22px;
        }
    }
}
</style>
